<template>
    <div class="mod-config">
        <el-row :gutter="20">
            <el-col :span="4" style="border-right: 1px dashed rgba(0,0,0,0.11);padding: 4px 0;border-radius: 0">
                <category ref="category" @changeTreeData="changeTreeData"/>
            </el-col>
            <el-col :span="20">
                <div class="mod-config">
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                        <el-form-item>
                            <el-input v-model="dataForm.key" placeholder="查询条件" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getDataList()">查询</el-button>
                            <el-button type="primary" @click="getAllDataList()">查询全部</el-button>
                            <el-button
                                v-if="isAuth('product:attrgroup:save')"
                                type="primary"
                                @click="addOrUpdateHandle()"
                            >新增
                            </el-button>
                            <el-button
                                v-if="isAuth('product:attrgroup:delete')"
                                type="danger"
                                @click="deleteHandle()"
                                :disabled="dataListSelections.length <= 0"
                            >批量删除
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                        :data="dataList"
                        border
                        v-loading="dataListLoading"
                        @selection-change="selectionChangeHandle"
                        style="width: 100%;"
                    >
                        <el-table-column type="selection" header-align="center" align="center"
                                         width="50"></el-table-column>
                        <el-table-column prop="attrGroupName" header-align="center" align="center"
                                         label="组名"></el-table-column>
                        <el-table-column prop="sort" header-align="center" align="center"
                                         label="排序"></el-table-column>
                        <el-table-column prop="descript" header-align="center" align="center"
                                         label="描述"></el-table-column>
                        <el-table-column prop="icon" header-align="center" align="center"
                                         label="组图标"></el-table-column>
                        <el-table-column header-align="center" align="center" label="所属分类">
                            <template slot-scope="scope">
                                {{ scope.row.catelogIdsAndNames.names.join('/') }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            header-align="center"
                            align="center"
                            width="150"
                            label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">
                                    关联
                                </el-button>
                                <el-button
                                    type="text"
                                    size="small"
                                    @click="addOrUpdateHandle(scope.row.attrGroupId)"
                                >修改
                                </el-button>
                                <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="sizeChangeHandle"
                        @current-change="currentChangeHandle"
                        :current-page="pageIndex"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="totalPage"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                    <!-- 弹窗, 新增 / 修改 -->
                    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
                    <!-- 修改关联关系 -->
                    <relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import AddOrUpdate from './attrgroup-add-or-update'
import CategoryCascader from '../common/category-cascader'
import Category from '../common/category'
import RelationUpdate from './attr-group-relation'

export default {
    components: {Category, AddOrUpdate, CategoryCascader, RelationUpdate},
    data () {
        return {
            catId: '',
            dataForm: {
                key: ''
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            addOrUpdateVisible: false,
            relationVisible: false
        }
    },
    activated () {
        this.getAllDataList()
    },
    methods: {
        changeTreeData (clickNodeData) {
            if (clickNodeData && clickNodeData.catLevel === 3) {
                this.catId = clickNodeData.catId
                this.getDataList(this.catId)
            } else {
                this.catId = ''
            }
        },
        // 获取数据列表
        getDataList (catId) {
            let params = this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key,
                'catelogId': catId
            })
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/product/attrgroup/list'),
                method: 'get',
                params: params
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.records
                    this.totalPage = data.page.totalCount
                    this.pageIndex = data.page.currPage
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        getAllDataList () {
            let params = this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key
            })
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/product/attrgroup/getAllDataList'),
                method: 'get',
                params: params
            }).then(({data}) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.records
                    this.totalPage = data.page.totalCount
                    this.pageIndex = data.page.currPage
                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val
            this.pageIndex = 1
            this.getDataList()
        },
        // 当前页
        currentChangeHandle (val) {
            this.pageIndex = val
            this.getDataList()
        },
        // 多选
        selectionChangeHandle (val) {
            this.dataListSelections = val
        },
        // 新增 / 修改
        addOrUpdateHandle (id) {
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id)
            })
        },
        // 删除
        deleteHandle (id) {
            let ids = id ? [id] : this.dataListSelections.map(item => {
                return item.attrGroupId
            })
            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: this.$http.adornUrl('/product/attrgroup/delete'),
                    method: 'post',
                    data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getAllDataList()
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            })
        },
        relationHandle (groupId) {
            this.relationVisible = true;
            this.$nextTick(() => {
                this.$refs.relationUpdate.init(groupId);
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>
